<template>
    <div class="tabcontrol">
        <div class="tabcontrolitem" v-for="(item,index) in titles" v-bind:key="index" :class="{active:index===currentIndex}">
            <span v-on:click="tabControl(index)">{{item}}</span>
        </div>
    </div>
</template>

<script>
const {ref} = require("vue");
export default {
    name: "TabControl",
    props:{
      titles:{
        type:Array,
        default:function (){
          return []
        }
      }
    },
    setup(props,context){
      let currentIndex=ref(0)

      //方法
      function tabControl(index){
        currentIndex.value=index
        context.emit('tabClick',index)
      }

      return {
        currentIndex,
        //方法
        tabControl
      }
    }
}
</script>

<style scoped>
.tabcontrol{
    display: flex;
    background-color: white;
    padding: 5px 0;
}
.tabcontrolitem{
    flex: 1;
    text-align: center;
}
span{
    line-height: 22px;
    display: inline-block;
}
.active span{
    color: red;
    border-bottom: 3px solid red;
}
</style>
